<template>
	<container-wrapper :designer="designer" :widget="thisWidget" :parent-widget="thisParentWidget" :parent-list="thisParentList"
					   :style="widget.options.customStyle" :index-of-parent-list="thisIndexOfParentList">
		<el-row :key="thisWidget.id" :gutter="thisWidget.options.gutter" class="grid-container"
				:class="[selected ? 'selected' : '', customClass]"
				@click.stop="selectWidget(thisWidget)">
			<template v-for="(colWidget, colIdx) in thisWidget.cols" :key="colWidget.id">
				<grid-col-widget :widget="colWidget" :designer="designer" :parent-list="thisWidget.cols"
								 :index-of-parent-list="colIdx" :parent-widget="thisWidget"
								 :col-height="thisWidget.options.colHeight"></grid-col-widget>
			</template>
		</el-row>
	</container-wrapper>
</template>

<script>
import GridColWidget from "@/components/designer/form-designer/form-widget/container-widget/grid-col-widget"
import containerMixin from "@/components/designer/form-designer/form-widget/container-widget/containerMixin";
import ContainerWrapper from "@/components/designer/form-designer/form-widget/container-widget/container-wrapper";
import refMixinDesign from "@/components/designer/form-designer/refMixinDesign"

export default {
	name: "grid-widget",
	componentName: 'ContainerWidget',
	mixins: [containerMixin, refMixinDesign],
	inject: ['refList'],
	components: {
		ContainerWrapper,
		GridColWidget
	},
	props: {
		widget: Object,
		parentWidget: Object,
		parentList: Array,
		indexOfParentList: Number,
		designer: Object,
	},
	computed: {
		selected() {
			return this.thisWidget.id === this.designer.selectedId
		},
		customClass() {
			return this.thisWidget.options.customClass || ''
		},
	},
	data() {
		return {
			thisWidget:this.widget,
			thisParentWidget:this.parentWidget,
			thisParentList:this.parentList,
			thisIndexOfParentList:this.indexOfParentList
		}
	},
	watch: {
		'widget': {
			handler(val) {
				if (val) {
					this.thisWidget = val
				}
			}
		},
		'parentWidget': {
			handler(val) {
				if (val) {
					this.thisParentWidget = val
				}
			}
		},
		'parentList': {
			handler(val) {
				if (val) {
					this.thisParentList = val
				}
			}
		},
		'indexOfParentList': {
			handler(val) {
				if (val) {
					this.thisIndexOfParentList = val
				}
			}
		},
	},
	created() {
		this.initRefList();
	},
	mounted() {
	},
	methods: {}
}
</script>

<style lang="scss" scoped>
@import "../../../../../assets/formdesigner/styles/global.scss";

.el-row.grid-container {
	min-height: 50px;
	//line-height: 48px;
	//padding: 6px;
	outline: 1px dashed #336699;

	.form-widget-list {
		width: 100%;
		min-height: 28px;
	}

}

.grid-container.selected, .grid-cell.selected {
	outline: 2px solid $--color-primary !important;
}

</style>
